<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base"
      th:with="pageTitle='修改密码'">
<head>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <style>
        /*.footer {*/
            /*position:static;*/
            /*bottom:0px;*/
        /*}*/
    </style>
</head>
<body>
<th:block layout:fragment="custom_content">
    <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" id="addForm">
        <el-form-item label="原密码" prop="oldPassword">
            <el-input type="password" v-model="addForm.oldPassword" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item  label="新密码" prop="password">
            <el-input type="password" style="width: 200px" v-model="addForm.password" placeholder="请输入新密码">
            </el-input>
        </el-form-item>
        <el-form-item  label="确认新密码" prop="confirmPassword">
            <el-input type="password" style="width: 200px"  v-model="addForm.confirmPassword"
                      placeholder="请确认新密码">
            </el-input>
        </el-form-item>
        <el-button type="primary" @click="updatePassword('addForm')">修改密码</el-button>

    </el-form>
</th:block>
<th:block layout:fragment="javascript">
    <script>
        var indexVue = new Vue({
            el: '#app',
            data: function () {
                function validateOldPassword  (rule, value, callback) {
                    if (value === '') {
                        callback(new Error('请输入原密码'));
                        indexVue.valOldPassword = false;
                    } else {
                        indexVue.valOldPassword = true;
                    }
                };
                function validatePass (rule, value, callback)  {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                        indexVue.valPassword = false;
                    } else if (value.length < 6 || value.length > 15) {
                        callback(new Error('密码长度应为6~15个字符'));
                        indexVue.valPassword = false;
                    } else {
                        indexVue.valPassword = true;
                    }
                };
                function validatePass2  (rule, value, callback)  {
                    if (value === '') {
                        callback(new Error('请输入确认密码'));
                        indexVue.valConfirmPas = false;
                    } else if (value.length < 6 || value.length > 15) {
                        callback(new Error('确认密码长度应为6~15个字符'));
                        indexVue.valConfirmPas = false;
                    } else if (value !== indexVue.addForm.password) {
                        callback(new Error('两次输入密码不一致!'));
                        indexVue.valConfirmPas = false;
                    } else {
                        callback();
                        indexVue.valConfirmPas = true;
                    }
                };

                return {
                    siderWidthDialog:false,
                    siderbarWidth:15,
                    defaultIndex: '1',
                    addForm: {
                        oldPassword: '',
                        password: '',
                        confirmPassword: ''
                    },
                    addRules: {
                        oldPassword: [
                            {validator: validateOldPassword, trigger: 'blur'}
                        ],
                        password: [
                            {validator: validatePass, trigger: 'blur'}
                        ],
                        confirmPassword: [
                            {validator: validatePass2, trigger: 'blur'}
                        ]
                    },
                    valOldPassword: false,
                    valPassword: false,
                    valConfirmPas:false,
                    isCollapse: false,
                    breadcrumbs:['修改密码'],

                    menus: [],
                    regulationMenus: [],
                    deptTrees:[]
                }
            },
            methods: {
                updatePassword: function (formName) {
                    var $this = this;
                    if(!indexVue.valOldPassword || !indexVue.valPassword ||!indexVue.valConfirmPas) {
                        $this.$message('请填写正确的数据!');
                        return;
                    }

                    $.ajax({
                        cache: true,
                        url: '/user/changepassword',
                        type: 'POST',
                        data: JSON.stringify(indexVue.addForm),
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                $this.$alert('修改密码成功！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {
                                        location.href = "/logout";
                                    }
                                });

                            } else {
                                $this.$message.error(data.msg);
                            }
                        }
                    });

                },
                initMenu: function () {
                    var $this = this;
                    var data = commonInitMenu($this);
                },

                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    window.localStorage.setItem('isCollapse',this.isCollapse);
                },
                changeSiderWidth:function(value){
                    changeSiderWidth(this,value);
                },
                openChangeSiderWidth:function(){
                    this.siderWidthDialog=true;
                }
            },
            created: function () {
                initCssProperty(this);
            }
        });

        function init() {
            indexVue.initMenu();
        }

        $(function () {
            init();
            changeFooterHeight();
        })
    </script>
</th:block>
</body>
</html>